<template>
	<view>
		<view id="top-box" class="cu-bar bg-white solid-bottom">
			<!-- 			<view class="action text-black">
				<text>提交</text>
			</view> -->
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button>
				<button class="cu-btn bg-green shadow" style="margin-left: 20px;" data-target="modalCard" @click="SubmitAnswer">提交</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalCard=='modalCard'?'show':''" @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<scroll-view class="page padding" :scroll-y=true :style="{'height':swiperHeight}">
					<!-- 答题卡 -->
					<view class="cu-bar solid-bottom">
						<view class="action">答题卡</view>
					</view>
					<!-- 答题卡弹窗 -->
					<view class="grid col-5 ">
						<view class="margin-tb-sm text-center" v-for="(subject,index) in subjectList" :key="index">
							<button class="cu-btn round" :class="[userAnswer[index]===undefined || userAnswer[index]===null?'line-grey':'bg-green']"
							 @click="AppointedSubject(index)">{{index+1}}</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<form>
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{'height':swiperHeight}">
				<swiper-item v-for="(subject,index) in subjectList" :key='index'>
					<view v-if="index-subjectIndex>=-1&&index-subjectIndex<=1">
						<view class="cu-bar bg-white solid-bottom">
							<!-- 题目 -->
							<view class="action text-black">
								<rich-text :nodes="subject.Title"></rich-text>
							</view>
						</view>
						<view>
							<radio-group class="block" @change="RadioboxChange">
								<!-- 选项 -->
								<view class="cu-form-group" v-for="(option,num) in subject.subject_answer" :key='num'>
									<radio v-if="option.ItemCA != null" :value="option.ItemCA" :checked="userAnswer[index]  === option.ItemCA ? true : false">
										<view class="title text-black">{{option.ItemContent}}</view>
									</radio>
									<radio v-else :value="option.Item" :checked="userAnswer[index]  === option.Item ? true : false">
										<view class="title text-black">{{option.ItemContent}}</view>
									</radio>
								</view>
							</radio-group>
						</view>
					</view>

				</swiper-item>
			</swiper>
		</form>
		<view id="foot-box" class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="MoveSubject(-1)">
				<view class="cuIcon-cu-image">
					<text class="lg cuIcon-back text-gray"></text>
				</view>
				<view class="text-gray">上一题</view>
			</view>
			<view class="action" @click="MoveSubject(1)">
				<view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-right"></text>
				</view>
				<view class="text-gray">下一题</view>
			</view>

		</view>

	</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				currentType: 0, //当前题型
				subjectIndex: 0, //跳转索引
				autoRadioNext: true, //判断题、单项题，自动移下一题
				swiperHeight: '800px', //
				subjectList: [], //试题列表
				modalCard: null, //显示答题卡
				userAnswer: []
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onReady() {
			var tempHeight = 800;
			var _me = this;
			uni.getSystemInfo({
				//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {
					tempHeight = res.windowHeight;
					uni.createSelectorQuery().select("#top-box").fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						tempHeight -= data.height;
						uni.createSelectorQuery().select("#foot-box").fields({
							size: true,
							scrollOffset: true
						}, (data) => {
							tempHeight -= data.height;
							_me.swiperHeight = tempHeight + 'px';
						}).exec();
					}).exec();
				}
			});
		},
		onLoad(option) {
			this.$request({
				url: 'occupation/getDetails/',
				data: {
					'questiontype_id': option.id
				},
				header: {
					'token': this.userinfo.token
				}
			}).then(res => {
				this.subjectList = res.data.question_subbject
			})
		},
		methods: {
			showCardModal: function(e) {
				this.modalCard = e.currentTarget.dataset.target
			},
			hideCardModal: function(e) {
				this.modalCard = null
			},

			//滑动事件
			SwiperChange: function(e) {
				let index = e.target.current;
				// 判断是否还有最后一题
				if (index != undefined) {
					this.subjectIndex = index;
				}
			},

			RadioboxChange: function(e) {
				let _self = this
				var values = e.detail.value;
				// 把每个选项,set到一个新的数组里面，保存用户题目答案
				_self.$set(_self.userAnswer, this.subjectIndex, values)
				// 判断是否还有最后一题
				if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {
					this.subjectIndex += 1;
				};
			},

			//上一题、下一题
			MoveSubject: function(e) {
				if (e === -1 && this.subjectIndex != 0) {
					this.subjectIndex -= 1;
				}
				if (e === 1 && this.subjectIndex < this.subjectList.length - 1) {
					this.subjectIndex += 1;
				}
			},

			//题卡指定
			AppointedSubject: function(e) {
				this.modalCard = null;
				this.subjectIndex = e;
			},

			// 提交
			SubmitAnswer() {
				var data = this.userAnswer.map(obj => {
					return obj
				})
				// 过滤掉undefined(未作答时候，会出现undefined)
				if (data.filter(d => d).length != this.subjectList.length) {
					this.$showMessage('做完全部试题后才能提交哦！')
				} else {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					this.$request({
						method: 'POST',
						url: 'occupation/getUserAnswer/',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'token': this.userinfo.token
						},
						data: {
							'data': data
						}
					}).then(res => {
						console.log(res)
					})
				}
			},
		}
	}
</script>

<style>
	@import "../../components/colorui/main.css";
	@import "../../components/colorui/icon.css";
	@import "../../components/colorui/animation.css";

	page {
		background-color: #FFFFFF;
	}

	.cu-form-group {
		justify-content: flex-start
	}

	.cu-form-group .title {
		padding-left: 30upx;
		padding-right: 0upx;
	}

	.cu-form-group+.cu-form-group {
		border-top: none;
	}

	.cu-bar-title {
		min-height: 50upx;
	}

	.cu-list.menu>.cu-item-error {
		justify-content: flex-start;
	}
</style>
